<template>
  <div v-if="currentDevice.devices && currentDevice.devices.length > 0">
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <b class="header-title">阀门控制</b>
        <el-button-group style="float:right;">
          <el-button type="primary" icon="el-icon-refresh" size="mini" @click="refresh">刷新状态</el-button>
          <el-button type="primary" icon="el-icon-s-operation" size="mini" :disabled="childSelected.length === 0" @click="showControlAll">控制选中</el-button>
        </el-button-group>
      </div>
      <el-collapse v-model="activeNames">
        <el-collapse-item v-for="(item,index) in currentDevice.cells" :key="index" :name="index">
          <template slot="title">
            <b style="min-width:48px;margin-right:12px;">{{ item.name }}</b>
            <el-badge
              v-for="(citem,cindex) in item.devices"
              :key="cindex"
              is-dot
              class="item"
              style="margin:0 1px;"
              :type="getValveClass(citem.serialno)"
            />
          </template>
          <div class="childs-container">
            <dl v-for="(citem,cindex) in item.devices" :key="cindex" class="menux" @click="showControl(citem)">
              <dt><img :src="getDeviceImage(citem)" alt=""></dt>
              <dd>{{ citem.name }}</dd>
            </dl>
          </div>
        </el-collapse-item>
      </el-collapse>
      <el-dialog
        v-el-drag-dialog
        title="阀门控制"
        :append-to-body="true"
        destroy-on-close
        :visible.sync="dialogVisible"
        @close="dialogClose"
      >
        <div class="tags">
          <el-tag
            v-for="(item,index) in childSelected"
            :key="index"
            closable
            type="primary"
            style="margin:8px 8px 8px 0;"
            @close="closeTag(index)"
          >
            {{ item.name }}
          </el-tag>
        </div>
        <div class="h20" />
        <div>
          <div class="btn-container">
            <el-button type="primary" icon="el-icon-caret-right" @click="control(1)">打开</el-button>
            <el-button type="danger" icon="el-icon-switch-button" @click="control(0)">关闭</el-button>
          </div>
        </div>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { sendCommand, sendCommands } from '@/api/device'
import { selectable } from '@/utils/selectable'
import { dclassCodeMap } from '@/utils/constant'
import { uniqueArr } from '@/utils'
import { getDeviceImage, getDeviceStatus } from '@/utils/device'
export default {
  data() {
    return {
      activeName: 'first',
      controlMode: true,
      activeNames: [0],
      dialogVisible: false,
      childSelected: []
    }
  },
  computed: {
    ...mapGetters(['currentDevice', 'devicesObj'])
  },
  watch: {
    currentDevice: {
      handler(newVal, oldVal) {
        this.$nextTick(() => {
          selectable('childs-container', 'menux', (list, dom) => {
            const serialnos = newVal.cells[dom].devices.map(val => { return val.serialno })
            if (list.length === 0) {
              this.childSelected = this.childSelected.filter(val => { return !serialnos.includes(val.serialno) })
            }
            list.forEach((item, index) => {
              this.childSelected.push(newVal.cells[dom].devices[item])
            })
            this.childSelected = uniqueArr(this.childSelected)
          })
        })
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    showControl(item) {
      this.childSelected = []
      this.childSelected.push(item)
      this.dialogVisible = true
    },
    showControlAll() {
      this.dialogVisible = true
    },
    closeTag(index) {
      this.childSelected.splice(index, 1)
    },
    control(value) {
      this.$confirm('确定要进行此操作吗？', '操作确认', { type: 'warning' }).then(() => {
        const namekeys = ['Close', 'Open']
        for (const nozzle of this.childSelected) {
          const serialno = nozzle.rtu_serialno
          const namekey = namekeys[value] + nozzle.port
          const action = {
            namekey: namekey,
            value: 1
          }

          sendCommand(action, serialno).then(res => {
            this.$message({ message: res.msg, type: 'success', showClose: true })
          })
        }
      })
    },
    refresh() {
      const actions = { actions: [
        { namekey: 'READ_ALL_AIS', params: true },
        { namekey: 'READ_ALL_DOS', params: true },
        { namekey: 'READ_ALL_HOLDS', params: true }]
      }
      const rtu_devices = this.currentDevice.devices.filter(val => {
        return +val.product_type === dclassCodeMap.fkq
      }).map(val => { return val.serialno })
      let count = 0
      rtu_devices.forEach((item, index) => {
        sendCommands(actions, item).then(res => {
          if (res.errorCode === 0) {
            count++
            if (count === rtu_devices.length) {
              this.$message({ message: res.msg, type: 'success', showClose: true })
            }
          }
        })
      })
    },
    dialogClose() {
      this.childSelected = []
    },
    getDeviceImage(currentDevice) {
      return getDeviceImage(this.devicesObj[currentDevice.serialno])
    },
    getValveClass(serialno) {
      return getDeviceStatus(this.devicesObj[serialno]) === 'd_run' ? 'success' : 'info'
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
